<template>
  <div class="about">
    <img class="titleImg" src="@/assets/img/headerImg.png" alt="">
    <section>
      <div class="allTitle">
        <p class="CnTitle">公司项目</p>
        <p class="EnTitle">CONMPANY  PROJECT</p>
      </div>
      <div class="commonWrapper">
        <el-carousel interval="5000" indicator-position="outside" class="team-wrapper" height="532px"  trigger="click">
          <el-carousel-item v-for="(item, index) in projectList" :key="index">
            <div class="project">
              <div class="left">
                <h2>{{item.project_name}}</h2>
                <div class="item">
                  <div class="title">{{item.character1}}</div>
                  <p>{{item.character1_info}}</p>
                </div>
                <div class="item">
                  <div class="title">{{item.character2}}</div>
                  <p>{{item.character2_info}}</p>
                </div>
                <div class="item">
                  <div class="title">{{item.character3}}</div>
                  <p>{{item.character3_info}}</p>
                </div>
                <div class="item">
                  <div class="title">{{item.character4}}</div>
                  <p>{{item.character4_info}}</p>
                </div>
              </div>
              <div class="right">
                <div class="line"></div>
                <img :src="$api.picPre + item.pic">
              </div>
            </div>
          </el-carousel-item>
        </el-carousel>
      </div>
    </section>
  </div>
</template>
<script>
export default {
  name: 'Home',
  data () {
    return {
      projectList: []
    }
  },
  methods: {
    getProjectList () {
      this.$ajax
        .get(this.$api.getProjectList, {
          page_size: 300,
          page: 1
        })
        .then(res => {
          this.projectList = res.data
        })
        .catch(err => {
          this.$message({
            message: err,
            type: 'warning'
          })
        })
    }
  },
  created () {
    this.getProjectList()
  }
}
</script>
<style scoped lang="scss">
  section{
    margin-bottom: 127px;
  }
  .project{
    @include flex_content;
    @include flex_justify_space;
    @include flex_align_center;
    height: 532px;
    .left{
      margin-right: 73px;
      h2{
        font-size:24px;
        font-family:Microsoft YaHei;
        font-weight:bold;
        color:rgba(27,31,42,1);
        line-height:50px;
      }
      .title{
        font-size:18px;
        font-family:Microsoft YaHei;
        font-weight:bold;
        color:rgba(146,40,42,1);
        line-height:40px;
        &:before{
          content: '•';
          width:8px;
          height:8px;
          margin-right: 10px;
          color:rgba(146,40,42,1);
          border-radius:50%;
        }
      }
      p{
        font-size:14px;
        margin-left: 18px;
        font-family:Microsoft YaHei;
        font-weight:400;
        color:rgba(85,85,85,1);
        line-height: 20px;
      }
      .item{
        margin: 20px 0 ;
      }
    }
    .right{
      width: 389px;
      height: 532px;
      text-align: left;
      position: relative;
      .line{
        z-index: 1;
        position: absolute;
        top: 0;
        right: 0;
        width:348px;
        height:516px;
        border: 4px solid rgba(146,40,42,1);
      }
      img{
        position: relative;
        z-index: 10;
        width: 350px;
        margin: 32px 39px 0 0;
      }
    }
  }
</style>
